<template>
  <el-card>
    <div class="card-title">{{ title }}</div>
    <div class="card-value">{{ value }}</div>
    <div class="card-wrap">
      <slot />
    </div>
    <div class="card-line"></div>
    <div class="card-footer">
      <slot name="footer" />
    </div>
  </el-card>
</template>

<script lang="ts">
export default {
  name: 'CommonCard',
}
</script>

<script lang="ts" setup>
defineProps<{
  title: string
  value: string
}>()
</script>

<style scoped>
.card-title {
  font-size: 12px;
  color: #aaa;
}
.card-value {
  font-size: 22px;
  font-weight: 600;
  margin: 8px 0 10px;
  color: #444;
}
.card-wrap {
  height: 60px;
}
.card-line {
  height: 2px;
  background-color: #eee;
}
</style>
